<template>
  <div class="home">
    <div class="home_box">
      <img
        src="./img/z1599614281917_966441.jpg"
        alt=""
        style="
          width: 200px;
          height: 200px;
          margin-left: 35%;
          margin-top: 180px;
          border-radius: 30px;
        "
        class="tuan"
      />
      <div class="form">
        <el-form label-width="100px" :model="login" style="max-width: 460px">
          <el-form-item>
            <el-input v-model="login.username" placeholder="请输入账号" />
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="login.pwd"
              placeholder="请输入密码"
              show-password
            />
          </el-form-item>
          <el-form-item class="btn">
            <el-button type="primary" @click="logins">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive } from "vue";
import { useRouter } from "vue-router";
import axios from "axios";
const login = reactive({
  username: "",
  pwd: "",
  super: "",
});
let router = useRouter();
let logins = async () => {
  console.log(login);
  let { data } = await axios.post("http://localhost:3050/mbw/login", {
    ...login,
  });
  if (data.msg == "登录成功") {
    localStorage.setItem("data", JSON.stringify(data.cates));
    localStorage.setItem("token", JSON.stringify(data.token));
    router.push("/menu");
    return;
  } else {
    alert(data.msg);
  }
};
</script>
<style scoped>
.home {
  height: 100%;
  width: 100%;
  position: relative;
  background: url("./img/2104141427042101873854.jpeg") no-repeat;
  background-size: 70% 100%;
}
.home_box {
  width: 30%;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background: linear-gradient(to bottom right, #e1002a 30%, #ffffff);
}
.form {
  width: 80%;
  height: 50%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
.el-form {
  margin-top: 30%;
  color: black;
}
.home_box h1 {
  text-align: center;
  margin-top: 13%;
}
.btn {
  width: 100%;
}
.el-button {
  width: 100%;
}
.tuan {
  animation: rotate_3922 2s linear infinite;
}
@keyframes rotate_3922 {
  from {
    transform: translate(-50%, -50%) rotate(360deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(0deg);
  }
}
</style>
